<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .box {
            min-height: 300px;
            background-color: orange;
            color: #fff;
            font-size: 30px;
        }


        .v-enter {
            transform: translateX(-1000px);
            opacity: 0;
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 1s linear;
        }

        .v-enter-to,
        .v-leave {
            transform: translateX(0);
            opacity: 1;
        }

        .v-leave-to {
            transform: translateX(1000px);
            opacity: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <!--  -->
        <!-- 动态组件之间的切换 是可以使用transition过渡和动画效果的 -->
        <transition mode="out-in">
            <component :is="componentName"></component>
        </transition>
        <button @click="flag=!flag">切换</button>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>
        // const randomComponent = name => ({})   
        // const rdc = function(name){
        //    return {}
        // }

        const randomComponent = name => ({
            name,
            template: `<div class="box" :style="{backgroundColor: color}">
            <p>组件:{{name}}</p> 
            <p>计数{{count}}</p>
            <button @click="count++">计数++</button>
          </div>`,
            data() {
                const getRandomColor = () =>
                    `rgb(${~~(Math.random() * 255)}, ${~~(Math.random() * 255)}, ${~~(Math.random() * 255)})`
                return {
                    name,
                    count: 0,
                    color: getRandomColor(),
                };
            }
        });

        Vue.component("ComponentA", randomComponent('ComponentA'));

        Vue.component("ComponentB", randomComponent('ComponentB'));

        var vm = new Vue({
            el: "#app",
            data: {
                flag: true,
            },
            computed: {
                componentName() {
                    return this.flag ? 'ComponentA' : 'ComponentB'
                }
            }
        });
    </script>
</body>

</html>